<template>
  <!-- 账号登录容器 -->
  <view class="account-container">
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 应用标识 -->
      <text class="app-name">搭搭子</text>
      <text class="slogan">找到你的玩伴</text>
      
      <!-- 用户头像 -->
      <image class="user-avatar" src="/static/sample1.jpg" style="visibility: hidden;"></image>
      
      <!-- 登录表单 -->
      <view class="form-group">
        <input class="form-input" type="text" placeholder="用户名" />
      </view>
      <view class="form-group">
        <input class="form-input" type="password" placeholder="密码" />
      </view>
      
      <!-- 登录按钮 -->
      <button class="login-btn">登录</button>
    </view>
  </view>
</template>

<script setup>
// 可以在这里添加登录逻辑
</script>

<style>
.account-container {
  height: 100vh;
  background: #ffffff;
  position: relative;
}

/* 主内容区 */
.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15vh;
}

/* 应用标识 */
.app-name {
  font-size: 64rpx;
  color: #FF2442;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.slogan {
  font-size: 38rpx;
  color: #666;
  margin-bottom: 80rpx;
}

/* 用户头像 */
.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-bottom: 60rpx;
}

/* 表单组 */
.form-group {
  margin-bottom: 40rpx;
  width: 560rpx;
}

.form-input {
  width: 100%;
  height: 96rpx;
  border: 1rpx solid #eee;
  border-radius: 48rpx;
  padding: 0 32rpx;
  font-size: 32rpx;
}

/* 登录按钮 */
.login-btn {
  background: #FF2442;
  color: #ffffff;
  width: 560rpx;
  height: 96rpx;
  border-radius: 48rpx;
  font-size: 32rpx;
  line-height: 96rpx;
  margin-top: 40rpx;
}
</style>
